<template>
  <el-card>
    <el-form size="small" inline @submit.native.prevent>
      <el-form-item>
        <el-input v-model="searchRoleName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search(true)">
          查询
        </el-button>
        <el-button @click="search(false)">清空</el-button>
      </el-form-item>
    </el-form>
    <div class="mt-20">
      <el-button
        type="primary"
        size="small"
        @click="dialogVisible = true"
        v-permission="'btn.Role.add'"
      >
        添加
      </el-button>
      <el-button
        type="danger"
        size="small"
        disabled
        v-permission="'btn.Role.remove'"
        >批量删除</el-button
      >
    </div>
    <div class="table-wrap">
      <el-table :data="roleList" border v-loading="isLoading" class="my-20">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          type="index"
          label="序号"
          width="80px"
          align="center"
        />
        <el-table-column label="角色名称" prop="roleName">
          <template #default="{ row }">
            <el-input
              size="mini"
              v-if="row.isEdit"
              ref="inputRef"
              @blur="inputBlurHandle(row)"
              @keydown.native.enter="$refs.inputRef.blur()"
              v-model="editInput"
            ></el-input>
            <div size="mini" v-else>{{ row.roleName }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="{ row }">
            <el-button
              size="mini"
              type="info"
              icon="el-icon-info"
              title="分配权限"
              v-permission="'btn.Role.assgin'"
              @click="
                $router.push(
                  `/acl/role/auth?id=${row.id}&roleName=${row.roleName}`
                )
              "
            ></el-button>
            <el-button
              type="warning"
              icon="el-icon-edit"
              size="mini"
              @click="editRole(row)"
              v-permission="'btn.Role.update'"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              title="删除角色"
              @click="delRole(row)"
              v-permission="'btn.Role.remove'"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.page"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="pagination.limit"
        layout=" prev, pager, next, jumper, sizes, total"
        :total="pagination.total"
      />

      <!-- 新增角色 -->
      <el-dialog title="添加角色" :visible.sync="dialogVisible" width="30%">
        <el-form>
          <el-form-item label="请输入新名称">
            <el-input v-model="newRoleInput"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small">
            取 消
          </el-button>
          <el-button type="primary" @click="addRole" size="small">
            确 定
          </el-button>
        </span>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
import {
  getRoleListApi,
  updataRoleApi,
  delRoleApi,
  addRoleApi
} from '@/api/acl/roleApi'
export default {
  name: 'Role',
  data() {
    return {
      dialogVisible: false,
      newRoleInput: '',
      searchRoleName: '',
      isLoading: false,
      reqParams: { page: 0, limit: 0, roleName: '' },
      roleList: [],
      pagination: {
        page: 1,
        limit: 5,
        total: 3
      },
      editInput: ''
    }
  },
  mounted() {
    this.getRoleList()
  },
  methods: {
    // 查询角色
    search(flag) {
      this.reqParams.roleName = flag ? this.searchRoleName : ''
      if (!flag) this.searchRoleName = ''
      this.getRoleList()
    },
    // 新增角色
    async addRole() {
      if (!this.newRoleInput) return
      await addRoleApi({ roleName: this.newRoleInput })
      this.getRoleList()
      this.dialogVisible = false
    },
    // 删除角色
    async delRole(row) {
      if (!confirm('确定删除？')) return
      await delRoleApi(row.id)
      this.getRoleList()
      this.$message.success('删除成功')
    },
    // 编辑角色
    async editRole(row) {
      this.editInput = row.roleName
      this.$set(row, 'isEdit', true)
      await this.$nextTick()
      this.$refs.inputRef.focus()
    },
    // 失去焦点
    async inputBlurHandle(row) {
      row.isEdit = false
      await updataRoleApi({ id: row.id, roleName: this.editInput })
      this.getRoleList()
      this.$message.success('修改成功')
    },
    // 封装获取数据的放法
    async getRoleList() {
      this.isLoading = true
      this.reqParams.page = this.pagination.page
      this.reqParams.limit = this.pagination.limit
      const { data } = await getRoleListApi(this.reqParams)
      this.pagination.total = data.total
      this.roleList = data.items
      this.isLoading = false
    },
    handleSizeChange(size) {
      this.pagination.limit = size
      this.getRoleList()
    },
    // 切换页码
    handleCurrentChange(page) {
      this.pagination.page = page
      this.getRoleList()
    }
  }
}
</script>

<style scoped>
.mt-20 {
  margin-top: 20px;
}
.table-wrap {
  width: 1000px;
}
.my-20 {
  margin: 20px 0;
}
</style>
